import { useState, useEffect } from 'react';
import { useAuth } from '../context/AuthProvider';
import { FlatList, StyleSheet, TouchableOpacity, Text, TextInput, Button, View, Image, ImageBackground, ScrollView } from 'react-native';

const Myrequest = ({ navigation }) => {
    const { user } = useAuth();
    const [selectTab, setSelectTab] = useState("");
    const [page, setPage] = useState(1);
    const [list, setList] = useState([]);
    const [refreshing, setRefreshing] = useState(false);

    useEffect(() => {
        fetch('http://10.7.89.174:3000/puMyrequest',
            {
                method: 'POST',
                body: JSON.stringify({
                    userName:user.userName
                })
            })
            .then(res => res.json())
            .then(res => {
                setRefreshing(false)
                // console.log(res)
                if (page == 1) {
                    // console.log(list);
                    setList(res.List)
                    // console.log(list)
                }
                else {
                    setList([...list, ...res.List])
                }
            })
    }, [page])
    const changeType = (id) => {
        setSelectTab(id)
    }
    const onEnd = () => {
        setPage(page + 1)
    }
    const onRefresh = () => {
        setRefreshing(true);
        setPage(1);
    }
    const renderItem = ({ item }) => (
        <View key={item.id} style={{ marginTop: 25, marginLeft: "6%", borderColor: "lightgrey" }}>
            <View>
                <View style={{ width: 50, height: 50, marginTop: "5%" }}>
                    {/* 用户头像可以在users中查询，然后把数据放入message中，但是需要一个变量来确定这个用户 */}
                    <Image source={{ uri: 'data:image/jpeg/jpg;base64,' + user.avatarUrl }}
                        style={{ width: 50, height: 50, borderRadius: 50, }} />
                </View>
                <Text style={{ marginLeft: 60, marginTop: -40, fontSize: 25 }}>{item.userName}</Text>
                <Text style={{ marginLeft: 380, marginTop: -30, fontSize: 15 }}>
                    {item.requestDate}
                </Text>
                <View style={{ width: '100%', height: 100 }}>
                    <Text style={{ marginTop: 30, marginLeft: 5 }}>{item.requestText}</Text>
                </View>
                {/* 用户上传的图片显示 */}
                <View style={{ width: 250, height: 250, marginTop: "-5%", marginBottom: '2%' }}>
                    <Image source={{ uri: 'data:image/jpeg/jpg;base64,' + item.base64 }}
                        style={{ width: 250, height: 250, marginLeft: 10 }}
                    ></Image>
                </View>
            </View>
        </View>
    )

    return (
        <View>
            <FlatList
                ListEmptyComponent={<Text>暂无数据</Text>}
                onRefresh={onRefresh}
                refreshing={refreshing}
                data={list}
                renderItem={renderItem}
                onEndReached={onEnd}
                keyExtractor={item => item.id}
            />
        </View>
    );
}

const styles = StyleSheet.create({

});

export default Myrequest